<script setup>
import { ref } from 'vue';
import {ApiGetBannerList,ApiGetRecommendList,ApiGetSelectedList} from '@/api/index.js'
import {onShareAppMessage,onShareTimeline} from '@dcloudio/uni-app'

const goNotice=()=>{
 uni.reLaunch({
   url:'/pages/notices/notices'
 })
}
// 轮播图数据
const bannerList=ref([])
const getBannerList=async()=>{
  const res =await ApiGetBannerList()
  bannerList.value=res.data
}
getBannerList()
// 推荐数据
const recommendList=ref([])
const getRecommendList=async()=>{
  const res = await ApiGetRecommendList()
  recommendList.value=res.data
}
getRecommendList()
// 专题精选
const selectedList =ref([])
const getSelectedList= async()=>{
  const res = await ApiGetSelectedList({select:true})
  selectedList.value=res.data 
}
getSelectedList()

// 用户点击右上角分享
onShareAppMessage(()=>{
 return {
   title:'星云夕壁纸',
   path:'/pages/index/index'
 }
})
// 监听用户点击右上角转发到朋友圈
onShareTimeline(()=>{
  
})
</script>

<template>
	<view class="home-container pagebg">
    <!-- 自定义头部 -->
    <custom-nav-bar></custom-nav-bar>
    
    <!-- 轮播图 -->
    <view class="homeLayout">
      <view class="swiper">
        <swiper indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="rgba(255,255,255)" autoplay :interval="3000" :duration="1000" circular>
          <swiper-item v-for="(item,index) in bannerList" :key="item._id">
            <navigator v-if="item.target=='miniProgram'" :url="item.url" target="miniProgram" :app-id="item.appid" class="like">
              <image :src="item.picurl" mode="aspectFill"></image>
            </navigator>
            
            <navigator v-else :url="`/subpackage/classlist/classlist?${item.url}`"  class="like">
              <image :src="item.picurl" mode="aspectFill"></image>
            </navigator>
          </swiper-item>
        </swiper>
      </view>
    </view>
    <!-- 公告 -->
    <view class="notice" @click="goNotice">
      <view class="left">
     <uni-icons color="#28b389" type="sound" size="26" ></uni-icons>
      <text>公告</text>
      </view>
      <view class="center">
        <swiper  autoplay :interval="3000" circular vertical >
          <swiper-item v-for="item in 4">
            <view class="swiper-item">njhnjnjhjkhjktttttttttttttttttttt66666666666666666666666</view>
          </swiper-item>
        </swiper>
      </view>
      <view class="right">
         <uni-icons color="#28b389" type="forward" size="20" ></uni-icons>
      </view>
    </view>
    <!-- 每日推荐 -->
    <view class="recommend">
        <view class="left">每日推荐</view>
        <view class="right">
          <view class=""><uni-icons color="#28b389" type="calendar" size="26"></uni-icons></view>
          <uni-dateformat :date="Date.now()" format="dd"></uni-dateformat>号
        </view>
      </view>
      <!-- 向右滑动区域 -->
        <view class="scroll-x">
          <scroll-view scroll-x="true" >
         <image v-for="item in recommendList" :key="item._id" :src="item.smallPicurl" mode="aspectFill"></image>
          </scroll-view>
        </view>
        <!-- 专题精选 -->
        <view class="selected">
          <view class="left">专题精选</view>
          <view class="right">more+</view>
        </view>
        <!-- 组件 -->
        <view class="grid-box">
          <selected-image v-for="item in selectedList" :key="item._id" :item="item"></selected-image>
           <selected-image :isFlag=true></selected-image>
        </view>
        
  </view>
</template>



<style scoped lang="scss">
  .home-container{
    overflow: hidden;
    
    // 轮播图
    .homeLayout{
      width: 750rpx;
      height: 340rpx;
      padding: 0 30rpx;
      box-sizing: border-box;
      margin: 20rpx 0;
      
      
      .swiper{
        width: 690rpx;
        height: 340rpx;
        swiper{
          width: 100%;
          height: 100%;
          swiper-item{
            width: 100%;
            height: 100%;
            .like{
              width: 100%;
              height: 100%;
              image{
                width: 100%;
                height: 100%;
                border-radius: 10rpx;
              }
            }
            
          }
        }
        
      }
    }
    // 公告
    .notice{
      width: 690rpx;
      height: 80rpx;
      margin: 0 auto;
      background-color: #f6f6f6;
      border-radius: 30rpx;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 0 20rpx;
      box-sizing: border-box;
      .left{
        width: 120rpx; 
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-right: 10rpx;
        text{
          color:$brand-theme-color ;
          font-size: 30rpx;
          font-weight: 600;
        }
      }
      .center{
        flex: 1;
        height: 100%;
        swiper{
          height:100%;
          swiper-item{
          height: 100%;
           display: flex;
           align-items: center;
           .swiper-item{
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
             font-size: 24rpx;
           }
          }
        }
        
      }
      .right{
        width: 30rpx;
      }
    }
    // 每日推荐
    .recommend{
      width: 690rpx;
      height: 40rpx;
      margin: 20rpx auto;
      
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .left{
        font-size: 40rpx;
        font-weight: 600;
        
      }
      .right{
        display: flex;
        justify-content: space-between;
        align-items: center;
        text{
          font-size: 26rpx;
          color: #28b389;
          font-weight: 600;
        }
      }
    }
    .scroll-x{
      height: 460rpx;
      padding-left: 30rpx;
      scroll-view{
        white-space: nowrap;
        image{
          width: 200rpx;
          height: 450rpx;
          margin-right: 15rpx;
          border-radius: 10rpx;
      }
     
      }
    }
    .selected{
      
      width: 690rpx;
      height: 40rpx;
      margin: 20rpx auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left{
        font-size: 40rpx;
        font-weight: 600;
      }
      .right{
        color: grey;
        font-size: 40rpx;
      }
    }
    .grid-box{
      width: 690rpx;
      // height: 1000rpx;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap:10rpx;
      padding-bottom: 20rpx;
      
    }
  
  }
  
	
</style>
